<template>
  <div fluid class="position-container">
    <div class="curtain"></div>
    <!-- <overview-monitor class="overview-component first-component" /> -->
    <overview-message class="overview-component" />
    <overview-shortcuts class="overview-component" />
    <overview-events class="overview-component" />
    <overview-fan-speed class="overview-component" />
  </div>
</template>

<script>
import OverviewEvents from './OverviewEvents.vue';
// import OverviewMonitor from './OverviewMonitor';
import OverviewMessage from './OverviewMessage';
import OverviewShortcuts from './OverviewShortcuts';
import OverviewFanSpeed from './OverviewFanSpeed.vue';

export default {
  name: 'Overview',
  components: {
    OverviewEvents,
    // OverviewMonitor,
    OverviewMessage,
    OverviewShortcuts,
    OverviewFanSpeed,
  },
};
</script>
<style scoped>
.curtain {
  position: absolute;
  top: -10px;
  left: -32px;
  width: 105%;
  /* height: 450px; */
  height: 300px;
  background-color: #000033;
  z-index: 0;
}
.position-container {
  position: relative;
  .overview-component {
    margin-bottom: 30px;
  }
  .first-component {
    padding-top: 20px;
  }
}
</style>
